<template>
  <div class="dashboard-container">
    <dashboard-panel />
    <el-row :gutter="40">
      <el-col :span="12">
        <div class="main-container-wrapper">
          <div class="titles">近7日数据统计</div>
          <dashboard-chart ref="charts" :chart-data="chartDatas" />
        </div>
      </el-col>
      <el-col :span="6">
        <div class="main-container-wrapper">
          <div class="titles">系统日志</div>
          <vxe-list height="350" class="my-list" :data="systemLogs">
            <template v-slot="{ items }">
              <div
                class="my-list-item"
                v-for="(item, index) in items"
                :key="index"
              >
                {{ item.message }}<span class="time">{{ item.date_time }}</span>
              </div>
            </template>
          </vxe-list>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="main-container-wrapper">
          <div class="titles">更新日志</div>
          <vxe-list height="350" class="my-tree" :data="updateLogs">
            <template v-slot="{ items }">
              <div
                class="my-list-item"
                v-for="(item, index) in items"
                :key="index"
              >
                <div>{{ item.date_time }} - 版本：{{ item.title }}</div>
                <div class="list-content-area">
                  {{ item.content }}
                </div>
              </div>
            </template>
          </vxe-list>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ipcRenderer } from 'electron'
import { mapGetters } from 'vuex'
import { DashboardPanel, DashboardChart } from '@/components'

const chartDatas = {
  dates: [
    '2019-01-01',
    '2019-01-02',
    '2019-01-03',
    '2019-01-04',
    '2019-01-05',
    '2019-01-06',
    '2019-01-07'
  ],
  values: [
    {
      name: '出库数量',
      datas: [1000, 2000, 3300, 3912, 2011, 3201, 2230]
    },
    {
      name: '订单总量',
      datas: [932, 1233, 2342, 1222, 2099, 1111, 1083]
    },
    {
      name: '发货总量',
      datas: [932, 1829, 2901, 3021, 2000, 2901, 2211]
    }
  ]
}
export default {
  name: 'dashboard',
  components: {
    DashboardPanel,
    DashboardChart
  },
  created() {
    ipcRenderer.send('dashboard')
  },
  computed: {
    ...mapGetters(['name', 'roles'])
  },
  data() {
    return {
      chartDatas: chartDatas,
      systemLogs: [
        {
          message:
            '这是一条系统记录这是一条系统记录这是一条系统记录犯得上反对法傅大傅大师',
          date_time: '2020-05-03 20:30:10'
        },
        {
          message: '这是一条系统记录',
          date_time: '2020-05-03'
        },
        {
          message: '这是一条系统记录',
          date_time: '2020-05-03'
        },
        {
          message: '这是一条系统记录',
          date_time: '2020-05-03'
        },
        {
          message: '这是一条系统记录',
          date_time: '2020-05-03'
        },
        {
          message: '这是一条系统记录',
          date_time: '2020-05-03'
        },
        {
          message: '这是一条系统记录',
          date_time: '2020-05-03'
        },
        {
          message: '这是一条系统记录',
          date_time: '2020-05-03'
        },
        {
          message: '这是一条系统记录',
          date_time: '2020-05-03'
        },
        {
          message: '这是一条系统记录',
          date_time: '2020-05-03'
        },
        {
          message: '这是一条系统记录',
          date_time: '2020-05-03'
        },
        {
          message: '这是一条系统记录这是一条系统记录这是一条系统记录',
          date_time: '2020-05-03'
        },
        {
          message: '这是一条系统记录',
          date_time: '2020-05-03'
        },
        {
          message: '这是一条系统记录',
          date_time: '2020-05-03'
        },
        {
          message: '这是一条系统记录',
          date_time: '2020-05-03'
        },
        {
          message: '这是一条系统记录',
          date_time: '2020-05-03'
        },
        {
          message: '这是一条系统记录',
          date_time: '2020-05-03'
        },
        {
          message: '这是一条系统记录',
          date_time: '2020-05-03'
        },
        {
          message: '这是一条系统记录',
          date_time: '2020-05-03'
        },
        {
          message: '这是一条系统记录',
          date_time: '2020-05-03'
        },
        {
          message: '这是一条系统记录',
          date_time: '2020-05-03'
        },
        {
          message: '这是一条系统记录',
          date_time: '2020-05-03'
        }
      ],
      updateLogs: [
        {
          title: 'v1.0.1',
          content: '系统更新日志',
          date_time: '2020-05-03'
        },
        {
          title: 'v1.0.2',
          content: '系统更新日志',
          date_time: '2020-05-03'
        },
        {
          title: 'v1.0.3',
          content: '系统更新日志',
          date_time: '2020-05-03'
        },
        {
          title: 'v1.0.1',
          content: '系统更新日志',
          date_time: '2020-05-03'
        },
        {
          title: 'v1.0.2',
          content: '系统更新日志',
          date_time: '2020-05-03'
        },
        {
          title: 'v1.0.3',
          content: '系统更新日志',
          date_time: '2020-05-03'
        },
        {
          title: 'v1.0.1',
          content: '系统更新日志',
          date_time: '2020-05-03'
        },
        {
          title: 'v1.0.2',
          content: '系统更新日志',
          date_time: '2020-05-03'
        },
        {
          title: 'v1.0.3',
          content: '系统更新日志',
          date_time: '2020-05-03'
        }
      ]
    }
  },
  methods: {},
  mounted() {
    // 监听窗口的变化，实时调用 echarts的 resize事件
    window.onresize = () => {
      console.log('调用')
      // this.$refs.charts.chartDatas.resize()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.main-container {
  width: 100%;
  .main-container-wrapper {
    padding: 20px;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.05);
    .titles {
      line-height: 18px;
      color: rgba(0, 0, 0, 0.45);
      font-size: 16px;
      margin: 0 10px 20px;
    }
    .my-list-item {
      font-size: 12px;
      line-height: 20px;
      padding: 3px 0;
      color: rgb(158, 156, 156);
      .list-content-area {
        background-color: #f9f9f9;
        border: 1px solid #e6e6e6;
        padding: 5px 9px;
        font-size: 10px;
        margin: 5px 10px 5px 0;
        border-radius: 4px;
      }
      .time {
        color: rgb(211, 211, 211);
        margin-left: 10px;
      }
    }
    .contents {
      max-height: 350px;
      overflow-y: scroll;
    }
  }
}
// 滚动条的宽度
/deep/ .vxe-list--virtual-wrapper::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  height: 6px; // 纵向滚动条
}
// 滚动条的滑块
/deep/ .vxe-list--virtual-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
